import React from 'react';
import { useModel } from 'umi';
import { Avatar, Menu, Spin } from 'antd';
import HeaderDropdown from './HeaderDropdown';
import { LogoutOutlined } from '@ant-design/icons';
import avatarImg from '@/assets/images/avatar.png';

/** 用户信息模块loading */
const userLoading = (
  <span className="system-header-right-container-avatar">
    <Spin
      size="small"
      style={{
        marginLeft: 8,
        marginRight: 8,
      }}
    />
  </span>
);

const AvatarDropdown = ({ systemLogout }) => {
  const { initialState } = useModel('@@initialState');
  const { userInfo } = initialState;

  if (_.isEmpty(userInfo)) {
    return userLoading;
  }

  const onMenuClick = ({ key }) => {
    switch (key) {
      case 'logout': // 用户退出登录
        systemLogout();
        break;
      default:
        break;
    }
  };

  const MenuHeaderDropdown = (
    <Menu
      className="system-header-right-container-avatar-dropdown-menu"
      selectedKeys={[]}
      onClick={onMenuClick}
      items={[
        {
          key: 'logout',
          label: '退出登录',
          icon: <LogoutOutlined />,
        },
      ]}
    />
  );

  return (
    <HeaderDropdown overlay={MenuHeaderDropdown}>
      <span className="system-header-right-container-avatar">
        <Avatar
          alt="avatar"
          size="small"
          className="system-header-right-container-avatar-img"
          // src={'/api/avatar'}
          src={avatarImg}
        />
        <span className="system-header-right-container-avatar-text">
          {userInfo?.nickName || '用户'}
        </span>
      </span>
    </HeaderDropdown>
  );
};

export default AvatarDropdown;
